<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="zh-CN" class="translated-ltr">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

    <title>密码找回</title>
</head>
<body>

<style>


    .containerT {
        text-align: center;
        position: absolute;
        top: 50%;
        left: 50%;
        border-radius: 5%;
        background-color: rgba(255, 255, 255, 0.78);
        transform: translate(-50%, -50%);
        padding: 20px;
    }

    body {
        background-color: #e8e9f5
    }

    form input {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        outline: 0;
        border: 1px solid rgba(255, 255, 255, .4);
        background-color: rgba(185, 210, 227, 0.53);
        width: 200px;
        border-radius: 3px;
        padding: 8px 15px;
        margin: 0 auto 10px;
        display: block;
        text-align: center;
        font-size: 15px;
        color: #868782;
        -webkit-transition-duration: .25s;
        transition-duration: .25s;
        font-weight: 300;
    }

    form button {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        outline: 0;
        background-color: #9bdef1;
        border: 0;
        padding: 10px 15px;
        color: #333;
        border-radius: 3px;
        width: 200px;
        cursor: pointer;
        font-family: microsoft yahei, Arial, sans-serif;
        font-size: 16px;
        font-weight: 700;
        -webkit-transition-duration: .25s;
        transition-duration: .25s;
    }

    form button:disabled {
        background-color: gainsboro;
    }

    form input:hover {
        background-color: rgba(182, 231, 255, 0.4)
    }

    form input:focus {
        background-color: rgba(182, 231, 255, 0.4);
        width: 230px;
        color: #333
    }

    .notice {
        font-size: .5rem;
        color: #677a8b;
        -moz-appearance: none;
        padding: 8px 15px;
        display: none;
    }


</style>

<script type="text/javascript" src="//cdn.staticfile.org/jquery/2.1.0/jquery.js"></script>


<a style="position: absolute;left: 15px;top: 15px;" href="${rUri}">
    <svg t="1552965196429" class="icon" style="height: 20px;width: 20px" viewBox="0 0 1024 1024" version="1.1"
         xmlns="http://www.w3.org/2000/svg" p-id="1096" xmlns:xlink="http://www.w3.org/1999/xlink" width="200"
         height="200">
        <defs>
            <style type="text/css"></style>
        </defs>
        <path d="M398.259 312.832V85.348L0.007 483.503 398.259 881.82V648.502c284.4 0 483.565 91.004 625.735 290.15-56.838-284.472-227.502-568.82-625.735-625.82"
              fill="#868782" p-id="2556"></path>
    </svg>
</a>

<div class="containerT">


    <c:choose>


        <c:when test="${username!=null}">

            <%--如果有用户名属相表明已经验证完令牌--%>
            <form class="form">
                <label class="notice p1">由字母数字组成且字母开头,5至12位</label>
                <input class="password p1" type="password" placeholder="新的密码">
                <label class="notice p2">两次密码不一致</label>
                <input class="password p2" type="password" placeholder="再次输入">
                <button type="button" class="sb" disabled style="margin-top: 25px;color: #7e7e7e;
    text-align: center;">提交
                </button>
            </form>


            <script>

                let passwordRegex = /^[a-zA-Z0-9]{5,15}$/;

                let flag1 = false;

                $('.form .password.p1').bind("input propertychange", function (event) {
                    if (event.target.value !== "" && !passwordRegex.test(event.target.value)) {
                        $('.notice.p1').show();

                        flag1 = false;

                    } else {
                        $('.notice.p1').hide();
                        flag1 = true;

                    }
                });

                $('.form .password.p2').bind("input propertychange", function (event) {

                    //如果两个值相等
                    if (event.target.value === $('.form .password.p1').val()) {

                        $('.notice.p2').hide();

                        if (flag1) {
                            $('.sb').attr('disabled', false);
                        } else {
                            $('.sb').attr('disabled', true);
                        }

                    } else {
                        $('.notice.p2').show();
                        $('.sb').attr('disabled', true);
                    }
                });

                $('.form button').click(function () {

                    let password = $('.password.p1').val();

                    $.post('', {password: password, username: '${username}', token: '${token}'}, function (date) {

                        $('.form').before('<h3>密码已重置,正在跳转...</h3>')

                        $('.form').remove();

                        setTimeout(function () {

                            //重定向到首页
                            window.location = '/'

                        }, 2000);

                    });

                });

            </script>


        </c:when>

        <c:otherwise>

            <c:choose>

                <c:when test="${error!=null}">
                    <%--如果用错误提示,表明令牌出现问题--%>

                    <h3>${error}</h3>

                </c:when>
                <c:otherwise>

                    <%--如果既没有username也没有错误信息,表明是希望找回密码--%>

                    <form class="form">
                        <label class="notice">由字母数字组成且字母开头,5至12位</label>
                        <input class="username" type="text" placeholder="找回密码的账号">
                        <button type="button" class="sb" disabled style="margin-top: 25px;color: #7e7e7e;
    text-align: center;">提交
                        </button>
                    </form>

                    <script>

                        let usernameRegex = /^[a-zA-Z][a-zA-Z0-9]{4,11}$/;
                        $('.form .username').bind("input propertychange", function (event) {
                            if (event.target.value !== "" && !usernameRegex.test(event.target.value)) {
                                $('.notice').show();
                                $('.sb').attr('disabled', true)

                            } else {
                                $('.notice').hide();
                                $('.sb').attr('disabled', false);
                            }
                        });

                        $('.form button').click(function () {

                            let username = $('.form .username').val();

                            $.post('', {username: username}, function (date) {

                                $('.form').before(
                                    '            <h3>密码找回邮件已发送至: </h3>' +
                                    '            <h4>' + date + '</h4>');

                                $('.form').remove();

                                setTimeout(function () {

                                    //重定向回原页面
                                    window.location = '${rUri}'

                                }, 2000);

                            }).error(function (err) {

                                $('.form .username').before(
                                    '<label style="display: block" class="notice temp">' + err.responseText + '</label>');

                                setTimeout(function () {
                                    $('.notice.temp').remove();

                                }, 5000);


                            });

                        });

                    </script>

                </c:otherwise>
            </c:choose>
        </c:otherwise>
    </c:choose>

</div>

</body>


</html>